<template>
  <div class="app-container">
    <!--查询条件表单-->
    <el-form :inline="true" :model="searchPage" class="demo-form-inline">
      <el-form-item label="讲师姓名">
        <el-input v-model="searchPage.name" placeholder="讲师姓名"></el-input>
      </el-form-item>
      <el-form-item label="讲师头街">
        <el-select v-model="searchPage.level" clearable placeholder="讲师头街">
          <el-option label="高级讲师" value="1"></el-option>
          <el-option label="首席讲师" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入驻日期">
        <el-input v-model="searchPage.begin" type="date" clearable placeholder="创建时间起"></el-input>
      </el-form-item>
      <el-form-item label="~">
        <el-input v-model="searchPage.end" type="date" clearable placeholder="创建时间末"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <!--表格-->
    <el-table
      title="讲师列表"
      :data="list"
      border
      sortable
      style="width: 100%">
      <el-table-column
        type="selection"
        width="40">
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        sortable
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="intro"
        label="讲师资历"
        sortable>
      </el-table-column>
      <el-table-column
        prop="gmtCreate"
        label="创建时间"
        sortable
        width="170">
      </el-table-column>
      <el-table-column
        prop="level"
        label="头街"
        width="80">
        <template slot-scope="data">
          <el-tag v-if="data.row.level === 1"  type="success">高级讲师</el-tag>
          <el-tag v-if="data.row.level === 2">首席讲师</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
        sortable
        width="90">
      </el-table-column>
      <el-table-column
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button type="warning" @click="goUpdate(scope.row.id)">修改</el-button>
          <el-button type="danger" @click="delTeacher(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <br/>
    <br/>
    <el-pagination
      @current-change="handleSizeChange"
      :page-size="page.size"
      background
      layout="prev, pager, next"
      :total="page.total">
    </el-pagination>
  </div>
</template>

<script>
import {findAllTeacherList, deleteTeacher} from "../../api/teacher/teacher.js";

export default {
  data() {
    return {
      // 分页
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      // 查询条件
      searchPage: {
        name: null,
        level: null,
        begin: null,
        end: null
      },
      // 列表
      list: []
    }
  },
  created() {
    this.findAll()
  },
  methods: {
    // 查询全部
    async findAll() {
      let result = await findAllTeacherList(this.page.current, this.page.size, this.searchPage)
      this.list = result.data.records
      // 加载分页
      this.page.current = result.data.current
      this.page.size = result.data.size
      this.page.total = result.data.total
    },
    // 分页改变时
    handleSizeChange(value) {
      this.page.current = value
      this.findAll()
    },
    // 查询
    async search() {
      await this.findAll()
    },
    // 删除讲师
    async delTeacher(id) {
      this.$confirm('确定要删除该讲师？', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let r = await deleteTeacher(id)
        if (r.code === 20000) {
          this.$message.success("删除成功!")
          // 查询
          await this.findAll()
          return false
        }
        this.$message.error("删除失败," + r.message)
      })
    },
    // 去修改页面，回显该id的讲师信息
    goUpdate(id) {
      this.$router.push({path: `/teacher/update/${id}`})
    }
  }

}
</script>
